<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片黏贴上传</title>
	<style>
		#content {
			margin:0 auto;
			width:600px;
			height:600px;
			border:1px solid black;
		}
	</style>
</head>
<body>
	<!-- 内容区域 -->
    <div id="content" contenteditable="true">
	
	</div>
<script>
	var content = document.getElemmentById("content")
    // 添加监听事件paste
    content.addEventListener('paste', function (e){
		// 黏贴版没有数据,则直接结束
		if (!(e.clipboardData && e.clipboardData.items)) {
			return;
		}
		// 黏贴版数据项,是个数组
		var data = e.clipboardData.items;
		if (data && data.length) {
			var item = data[0];
			// 判断是文本还是图片文件
			if (item.kind == 'string') {
				// 获取文本内容
				var text = event.clipboardData.getData('Text');
				// 设置到content中
				content.innerHTML = text;
			} else if (item.kind == 'file') {
				// 获取文件
				var file = item.getAsFile();
				// 图片插入div中
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function (event) {
					var img = document.createElement("img");
					img.src = event.target.result;
					content.appendChild(img);
				}
			}
		}
		e.preventDefault();
	});
</script>
</body>
</html>